<template>
  <div class="chart"></div>
</template>

<script setup name="PieChart">
// 环状图
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { echartsColors } from '@/components/Charts/style.js'
import { emitter } from '@/utils/EventBus.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        title: '告警总数',
        label: '告警总数',
        total: 70,
        // 数组
        data: [
          { name: '待处理', value: 23 },
          { name: '已处理', value: 27 },
          { name: '已关闭', value: 20 }
        ]
      }
    }
  }
})

let chartInstance = null

function chartInit() {
  const legendsData = (props.options.data || []).map(item => item.name)

  chartInstance = echarts.init(proxy.$el)

  chartInstance.setOption({
    textStyle: {
      fontFamily: 'Avenir'
    },
    color: echartsColors,
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)' // '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      // icon: 'rect',
      // itemWidth: 8,
      // itemHeight: 8,
      top: 'center',
      left: '60%',
      textStyle: {
        // fontSize: 12,
        color: '#fff'
      },
      orient: 'vertical',
      data: legendsData
    },
    // backgroundColor: '#000',
    // title: {
    //   x: '29%',
    //   y: '38%',
    //   textAlign: 'center',
    //   itemGap: 5, // 主副标题距离
    //   top: '42%', // 字体的位置
    //   text: props.options.total,
    //   subtext: props.options.title,
    //   textStyle: {
    //     fontWeight: 'bold',
    //     color: '#343434',
    //     fontSize: 18
    //   },
    //   subtextStyle: {
    //     // 副标题的文字的样式
    //     fontFamily: 'din',
    //     fontWeight: 300,
    //     fontSize: 14,
    //     color: '#343434'
    //   }
    // },
    series: [
      {
        name: props.options.label,
        type: 'pie',
        label: {
          show: false,
          position: 'center'
        },
        // roseType: 'radius',
        radius: ['0%', '55%'],
        center: ['30%', '50%'],
        data: props.options.data,
        animationEasing: 'cubicInOut',
        animationDuration: 2600
      }
    ]
  })
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})


</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
